<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由-命名视图实现经典布局</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router-3.0.1.js"></script>
</head>
<body>
    <div id="app">
        <router-view></router-view>
        <router-view name="left"></router-view>
        <router-view name="right"></router-view>
    </div>


    <script>

        //初始化组件
        var headerCom = {
            template: '<h2>头部</h2>'
        }

        var leftCom = {
            template: '<h2>左边</h2>'
        }

        var rightCom = {
            template: '<h2>右边</h2>'
        }

        //初始化router
        var routerObj =  new VueRouter({
           routes:[
               {
                   path:"/",
                   //当一个url有多个出口时，使用命名视图
                   components:{
                       "default":headerCom,
                       "left":leftCom,
                       "right":rightCom
                   }
               }
           ]
        });

        var vue = new Vue({
            el : '#app',
            data:{

            },
            methods:{

            },
            //关联vue和router实例
            router:routerObj
        })
    </script>
</body>
</html>